<template>
  <div class="chat-container">
    <div class="chat-header">
      <button class="back-button" @click="goBack">
        <i class="iconfont icon-back"><van-icon name="arrow-left" /></i>
      </button>
      <div class="chat-header-title">{{ chatWith }}</div>
    </div>
    <div class="chat-messages">
      <div v-for="(message, index) in messages" :key="index" :class="['message', message.type]">
        <div class="message-content">{{ message.content }}</div>
        <div class="message-time">{{ message.time }}</div>
      </div>
    </div>
    <div class="chat-input">
      <van-icon name="volume" />
      <input type="text" v-model="newMessage" placeholder="请输入消息" />
      <van-icon name="smile-o" />
      <van-icon name="photo-o" />
      <button class="send-button" @click="sendMessage">
        
        <i class="iconfont icon-send">发送</i>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { content: '你好', time: '10:00 AM', type: 'received' },
        { content: 'Hi', time: '10:01 AM', type: 'sent' },
        { content: '你在忙吗？', time: '10:02 AM', type: 'received' }
      ],
      newMessage: '',
      chatWith: '张三' 
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() !== '') {
        const currentTime = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        this.messages.push({ content: this.newMessage, time: currentTime, type: 'sent' });
        this.newMessage = '';
      }
    },
    goBack() {
      // 返回上一页或者处理返回逻辑
      this.$router.go(-1); // 返回上一页
    }
  }
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f4f4f4;
}

.chat-header {
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  padding: 16px;
  display: flex;
  align-items: center;
}

.back-button {
  background: none;
  border: none;
  color: rgb(0, 0, 0);
  font-size: 24px;
  cursor: pointer;
}

.iconfont {
  font-size: inherit;
}

.chat-header-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.chat-messages {
  flex: 1;
  overflow-y: scroll;
  padding: 10px;
}

.message {
  max-width: 80%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  font-size: 16px;
}

.sent {
  background-color: #ff6262;
  color: #fff;
  align-self: flex-end;
  
}

.received {
  background-color: #ffffff;
  color: #333;
  align-self: flex-start;
}

.message-content {
  word-wrap: break-word;
}

.message-time {
  font-size: 12px;
  color: #999;
}

.chat-input {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

input {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 20px;
  background-color: #f5f5f5;
}

.send-button {
  margin-left: 10px;
  padding: 8px;
  border: none;
  background-color: #ff6262;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.send-button:hover {
  background-color: #0056b3;
}

@media (max-width: 576px) {
  .chat-header-title {
    font-size: 16px;
  }
}
.van-icon{
  font-size: 28px;
  color: #cccccc;
  margin: 0px 3px;
}
</style>
